<template>
  <div class="home-video-view">
    <!-- 第一部分 -->
    <div class="top-box">
      <img src="../assets/05.png" class="top-img" />
      <nav>发现最新电影</nav>
      <nav>打开App ></nav>
    </div>
    <!-- 第二部分 -->
    <div class="sign">
      <nav>猫眼电影<img src="../assets/06.png" class="sign-img" /></nav>
    </div>
    <!-- 第三部分 -->
    <van-tabs class="vantabs">
      <van-tab title="推荐">
        <div class="part">
          <div v-for="item in homevid" :key="item.id">
            <video
              :src="`${item.video.url}`"
              class="video-content"
              controls
            ></video>
            <div class="author">
              <div class="leftbox">
                <img :src="`${item.user.avatarurl}`" class="author-img" />
                <nav>{{ item.user.nickName }}</nav>
              </div>
              <div class="rightbox">
                <van-icon name="star-o" class="starvan" />
                <nav>{{ item.upCount }}</nav>
                <van-icon name="chat-o" class="chatvan" />
                <nav>{{ item.upCount }}</nav>
                <van-icon name="share-o" class="sharevan" />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="热片解读">
        <div class="part">
          <div v-for="item in homevid" :key="item.id">
            <video
              :src="`${item.video.url}`"
              class="video-content"
              controls
            ></video>
            <div class="author">
              <div class="leftbox">
                <img :src="`${item.user.avatarurl}`" class="author-img" />
                <nav>{{ item.user.nickName }}</nav>
              </div>
              <div class="rightbox">
                <van-icon name="star-o" class="starvan" />
                <nav>{{ item.upCount }}</nav>
                <van-icon name="chat-o" class="chatvan" />
                <nav>{{ item.upCount }}</nav>
                <van-icon name="share-o" class="sharevan" />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="新片预告">
        <div class="part">
          <div v-for="item in homevid" :key="item.id">
            <video
              :src="`${item.video.url}`"
              class="video-content"
              controls
            ></video>
            <div class="author">
              <div class="leftbox">
                <img :src="`${item.user.avatarurl}`" class="author-img" />
                <nav>{{ item.user.nickName }}</nav>
              </div>
              <div class="rightbox">
                <van-icon name="star-o" class="starvan" />
                <nav>{{ item.upCount }}</nav>
                <van-icon name="chat-o" class="chatvan" />
                <nav>{{ item.upCount }}</nav>
                <van-icon name="share-o" class="sharevan" />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="速看电影">
        <div class="part">
          <div v-for="item in homevid" :key="item.id">
            <video
              :src="`${item.video.url}`"
              class="video-content"
              controls
            ></video>
            <div class="author">
              <div class="leftbox">
                <img :src="`${item.user.avatarurl}`" class="author-img" />
                <nav>{{ item.user.nickName }}</nav>
              </div>
              <div class="rightbox">
                <van-icon name="star-o" class="starvan" />
                <nav>{{ item.upCount }}</nav>
                <van-icon name="chat-o" class="chatvan" />
                <nav>{{ item.upCount }}</nav>
                <van-icon name="share-o" class="sharevan" />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="剧集综艺">
        <div class="part">
          <div v-for="item in homevid" :key="item.id">
            <video
              :src="`${item.video.url}`"
              class="video-content"
              controls
            ></video>
            <div class="author">
              <div class="leftbox">
                <img :src="`${item.user.avatarurl}`" class="author-img" />
                <nav>{{ item.user.nickName }}</nav>
              </div>
              <div class="rightbox">
                <van-icon name="star-o" class="starvan" />
                <nav>{{ item.upCount }}</nav>
                <van-icon name="chat-o" class="chatvan" />
                <nav>{{ item.upCount }}</nav>
                <van-icon name="share-o" class="sharevan" />
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
import { Tab, Tabs } from "vant";
import { Icon } from "vant";
export default {
  name: "HomeVideoView",
  components: {
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  data() {
    return {
      homevid: [],
    };
  },
  mounted() {
    axios
      .get("/maoyan/asgard/asgardapi/sns/common/feed/channel/list.json", {
        params: {
          uuid: "3F02BD801D6511EDBB72C16CB199FA4632735EFA28174C9DBF684009100890A3",
          channelId: 4,
          feedChannelId: 1067226,
          timestamp: 1661345224154,
          offset: 15,
        },
      })
      .then(({ data }) => {
        // console.log(data);
        this.homevid.push(...data.data.feeds);
        // console.log(this.homevid);
        // this.homevid.forEach((item) => {
        //   item.sc = item.sc.toFixed(1);
        // });
      });
  },
};
</script>
<style scoped>
.top-box {
  height: 58px;
  border: 1px solid #ccc;
}

.top-img {
  width: 94px;
  height: 35px;
  position: absolute;
  line-height: 42px;
  top: 10px;
  left: 14px;
}

.top-box nav:nth-of-type(1) {
  font-size: 14px;
  line-height: 58px;
  position: absolute;
  right: 100px;
  color: rgb(102, 102, 102);
  font-weight: 620;
  height: 17px;
}

.top-box nav:nth-of-type(2) {
  font-size: 16px;
  line-height: 58px;
  position: absolute;
  right: 12px;
  color: rgb(179, 126, 126);
  font-weight: 700;
  height: 17px;
  text-align: center;
}

.sign {
  height: 55px;
  background-color: rgb(229, 72, 71);
  position: relative;
}

.sign nav:nth-of-type(1) {
  font-size: 18px;
  color: rgb(255, 255, 255);
  line-height: 55px;
  text-align: center;
}

.sign-img {
  height: 16px;
  width: 21px;
  position: absolute;
  top: 20px;
  left: 338px;
}

.part {
  height: 460px;
  overflow: auto;
}

.video-content {
  height: 235px;
  /* background-color: aqua; */
  border: 1px solid #ccc;
}

.author {
  width: 375px;
  height: 46px;
  display: flex;
}

.author-img {
  width: 22px;
  height: 22px;
  border-radius: 22px;
  margin: 11px 0 0 11px;
}

.author nav:nth-of-type(1) {
  font-size: 14px;
  margin: 16px 0 0 8px;
  color: rgb(102, 102, 102);
}

.leftbox {
  width: 280px;
  display: flex;
}

.rightbox {
  width: 125px;
  display: flex;
}

.starvan {
  margin-top: 14px;
  font-size: 20px;
}

.chatvan {
  margin-top: 14px;
  font-size: 20px;
}

.sharevan {
  margin-top: 14px;
  font-size: 20px;
}

.author nav:nth-of-type(2) {
  font-size: 14px;
  margin: 16px 0 0 2px;
  color: rgb(102, 102, 102);
}

.author nav:nth-of-type(3) {
  font-size: 14px;
  margin: 16px 0 0 2px;
  color: rgb(102, 102, 102);
}
</style>
